<template lang="pug">
.accessory-wrap(
  v-loading="loading")
  .content-title 图片
  ImportantInfo.pic-list(
    v-if="infoValue.picList"
    :columns="infoColumns"
    :infoList="['picList']"
    :formValues="infoValue"
    style="height:450px;border:none"
    height="auto")
  h6(v-if="!infoValue.picList") 暂无数据
  .content-title 附件
  el-table.table-xxs.acc-table(
    border
    :data="tableData")
    el-table-column(
      v-for="(item, index) of tableHeader"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :formatter="item.formatter")
      template(slot-scope="scope")
        a(
          v-if="item.prop==='fileName'"
          :href="`/api/dxbase/download/${scope.row.shortUrl}`"
          @click="return false") {{scope.row.fileName}}
          span.iconfont.icon-download
        span(v-else-if="item.prop==='eventTime'") {{scope.row[item.prop]?$moment(scope.row[item.prop]).format('YYYY-MM-DD HH:mm'):'-'}}
        span(v-else) {{scope.row[item.prop]}}
</template>

<script>
/**
 * @name Accessory 附件列表
 * @author Wangrf
 * @description 展示设备所有附件和图片
 */
import ImportantInfo from '@/components/ImportantInfo'

export default {
  components: {
    ImportantInfo
  },
  props: {
    siteId: Number
  },
  data () {
    return {
      loading: false,
      infoColumns: {
        picList: {
          label: '图片',
          columnSize: [
            { type: 'md', size: '12' },
            { type: 'sm', size: '12' }
          ],
          file: true
        }
      },
      infoValue: {
        picList: null
      },
      tableHeader: [
        {
          label: '操作',
          prop: 'operate'
        }, {
          label: '时间',
          prop: 'eventTime',
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            return this.$moment(cellValue, 'x').format('YYYY-MM-DD HH:mm')
          }
        }, {
          label: '文件名',
          prop: 'fileName',
          formatter: (row, column, cellValue, index) => {
            return ``
          }
        }, {
          label: '文件大小(byte)',
          prop: 'fileLength'
        }
      ],
      tableData: []
    }
  },
  filters: {
    formatTime (val) {
      if (!val) return '-'
      console.log(this)
      return this.$moment(val).format('YYYY-MM-DD HH:mm')
    }
  },
  mounted () {
    this.loading = true
    this.$get({
      url: '/pn/base/site/siteDeviceAccessry',
      params: {
        siteId: this.siteId
      }
    }).then(res => {
      this.loading = false
      if (!res.data) return
      this.infoValue = {
        picList: res.data.picList
      }
      this.tableData = res.data.accList || []
    })
  }
}
</script>

<style lang="sass" scoped>
.accessory-wrap
  width: 100%
  border: 1px solid #e0e0e0
  overflow: auto
  .content-title
    font-size: 16px
    font-weight: 900
    color: #555
    border-left: 3px solid #29a1f7
    margin: 20px 15px 8px
    padding-left: 5px
  h6
    text-align: center
    color: #909399
/deep/.acc-table
  min-height: 100px
  th, td
    height: 36px
    line-height: 36px
    padding: 0
    text-align: center
    color: #555555
    font-size: 12px
  th
    background: #e8ecef
    font-size: 12px
  tr
    &:nth-child(2n)
      background-color: #f7f8fa
    &:hover
      background-color: #eaeff3
/deep/.pic-list
  height: 100% !important
  .important-label
    display: none
</style>
